{if isset($conversations)}
<h2>Lista Twoich rozmów ze sprzedawcą</h2>
<p>Aby oznaczyć wiadomość jako przeczytaną, kliknij na nią</p>
<style type="text/css">
    .seller{
        margin: 5px;
        background-color: #ccffcc
        margin-left: 10px;
    }
    .customer{
        margin: 5px;
        background-color: #ffffcc;
        margin-left: 100px;
    }
    .newMessage {
        font-weight: bold;
    }
    .newMessage::before{
        content: "nowa wiadomość:";
        display: block;
        border-width: 2px;
        border-color: red;
        border-radius: 3px;
        border-style: solid;
    }
    .messages {
        height: 350px;
        overflow: auto;
    }

</style>
<div class="list-group" id="Chat">
    <div id="sound"></div>
{foreach $conversation in $conversations}
    <div class="panel panel-info" >
        <div class="panel-heading link convTitle" style="cursor: pointer">
        {echo $conversation->Topic}     {echo $conversation->AdditionDate}      
        {if $unreadConv[$conversation->ConversationID]>0}
        <div id="newMessage{echo $conversation->ConversationID}" class="badge">nowe wiadomości: <span class="count">{echo $unreadConv[$conversation->ConversationID]}</span></div>
        {/if}
    </div>
    <div id="AllConversation{echo $conversation->ConversationID}" class="panel-body" style="display: none">
        <input type="hidden" value="{echo $conversation->ConversationID}">
        <div class="messages">
         {foreach $message in $messages[$conversation->ConversationID]}
         {if $message->SendByCustomer==1}
         <div class="customer">
             {echo $message->AdditionDate}<br/>
             {echo $message->Content}
         </div>
         {/if}
         {else}
         {if $message->Seen==0}
         <div class="seller newMessage">
             <input type="hidden" value="{echo $message->AnswerID}">
             {/if}
             {else}
              <div class="seller">
             {/else}
             {echo $message->AdditionDate}<br/>
             {echo $message->Content}
         </div>
         {/else}         
         {/foreach}
        </div>
         <div id="conversation{echo $conversation->ConversationID}" class="col-xs-8"> </div>
         <button type="button" class="btn btn-default sendMessage col-xs-5">Wyślij wiadomość</button>
    </div>
</div>
{/foreach} 
</div>
{/if}
<script src="/js/jquery.timer.js" type="text/javascript"></script>
 <script src="/js/jquery.playSound.js" type="text/javascript"></script>
<button type="button" class="btn btn-default newconv">
        Rozpocznij nową rozmowę
    </button>
<div class="newQuestion hidden">
    <div class="form-group">
        <label class="col-lg-4" for="inputProductName">Podaj temat rozmowy</label>
        <input name="inputConversationName" class="col-lg-4 input-sm" type="text" id="inputProductName" placeholder="Podaj temat rozmowy" pattern="[ąćęńśóźżła-zA-Z\s\-0-9]+" maxlength="50" >       

    </div> 
    <div id="newQuestion" class="col-xs-8"> </div>
    <button type="button" class="btn btn-default beginConv col-xs-5">Wyślij wiadomość</button>
</div>

 <script src="/js/chat.js?{echo time()}" type="text/javascript"></script>
 <script type="text/javascript">
    var ids = [];
     {if isset($conversations)}
        {foreach $conversation in $conversations}
    ids[{echo $conversation_i}] = {echo $conversation -> ConversationID};
        {/foreach}
     {/if}
    {if isset($maxID)}
    var id = {echo $maxID};
    {/if}
    {else}
    var id = 1;
    {/else}

var conversationsCount = 0;
    {if isset($coversationsCount)}
    var conversationsCount = {echo $coversationsCount};
    {/if}

            $(document).ready(function () {
        chat(id, ids);
         initMessages(ids);
         sendMessage();
         markAsRead();
        beginConversation();
     });
 </script>